<template>
  <div class="wb_item cl">
    <img :src="data.user.profile_image_url" alt="" class="avatar">
    <div class="cont">
      <div class="user_name">{{data.user.screen_name}}</div>
      <div class="main_cont">{{data.text}}</div>
      <div v-if="data.pic_urls.length" class="pic_wrap">
        <a v-for="item in data.pic_urls" :href="JSON.parse(item).thumbnail_pic" target="_blank">
          <img :src="JSON.parse(item).thumbnail_pic" alt="">
        </a>
      </div>
      <div v-if="data.retweeted_status" class="origin_cont">
        <div class="user_name">{{data.retweeted_status.user.screen_name}}</div>
        {{data.retweeted_status.text}}
      </div>
    </div>
    <div class="bottom">
      <div class="fl">
        <span>{{dateFormat(data.created_at)}}</span>
        <span v-if="data.source" class="source">来自：<span v-html="data.source">{{data.source}}</span></span>
      </div>
      <div class="fr">
        <span class="op">转发（{{data.reposts_count}}）</span>
        <span class="op">评论（{{data.comments_count}}）</span>
      </div>
    </div>
<!--     <div class="edit_wrap">
      <weibo-edit></weibo-edit>
      <div class="op">
        <el-checkbox>同时转发</el-checkbox>
        <el-button size="small" type="primary" @click="handleSend">发送</el-button>
      </div>
    </div> -->
  </div>
</template>
<script>
  import weiboEdit from '@/components/common/content/weiboEdit'
  export default {
    components: {weiboEdit},
    props: ['data'],
    methods: {
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      // 发送评论
      handleSend () {
      }
    }
  }
</script>
<style lang="scss">
  .wb_item{
    &{padding-top:15px;font-size:14px;border-bottom:1px solid #ddd;}
    .avatar{float:left;width:50px;height:50px;}
    .cont{margin-left:65px;min-height:58px;}
    .user_name{margin-top:-8px;font-size:12px;color:#333;}
    .origin_cont .user_name{margin-top:0;}
    .main_cont{}
    .pic_wrap{
      &{display:flex;flex-wrap:wrap;width:344px;}
      img{margin:4px 0 0 4px;width:110px;height:110px;}
    }
    .bottom{margin-left:65px;line-height:28px;font-size:12px;color:#808080;overflow:hidden;}
    .bottom a{color:#808080;text-decoration:none;}
    .bottom .op{cursor:pointer;}
    .origin_cont{position:relative;margin-top:12px;padding: 10px;border:1px solid #ddd}
    .origin_cont:before{content:'';position:absolute;top:-20px;left:30px;border:10px solid transparent;border-bottom-color:#ddd}
    .origin_cont:after{content:'';position:absolute;top:-19px;left:30px;border:10px solid transparent;border-bottom-color:#fff;}
    .edit_wrap{
      &{margin-bottom:5px;}
      .wb_edit{margin:5px 0 0 65px;}
      .op{float:right;margin-top:-30px;}
      .el-button{margin-left:15px;}
    }
  }
</style>
